{% extends 'base.html' %}
{% load staticfiles %}
{% block custom_css %}
    <style>
    .course-list:hover{
        text-decoration: none;
        color: #56CFCA;
    }
    .course-list{
        color: white;
    }

    </style>
{% endblock %}
{% block content %}
    <div class="about_banner">
        <div class="container">
            <h2>课程关卡</h2>
            <span class="breadcrumbs">
                <a href="{% url 'index' %}"><i
                    class="fa fa-home home_1"></i></a> / <a href="{% url 'course:course_list' %}" class="course-list"><span>课程列表</span></a> / <span style="color: #56CFCA;">课程关卡</span>
            </span>
        </div>
    </div>
    <div class="about_top">
        <div class="container">
            <div class="col-md-3 forum">
                <div>
                    <img src="{{ MEDIA_URL }}{{ course.image }}" alt="" style="width: 230px;">
                    <br>
                    <br>
                    <h3 style="color: white;text-align: center;">{{ course.name }}</h3>
                    <br>
                    <span style="color: white;">{{ course.detail|slice:"70" }}...</span>
                    <br>
                    <br>
                    <i class="fa fa-user fa-lg" style="color: white;">&nbsp;&nbsp;&nbsp;&nbsp;{{ course.students }}</i>
                    <span class="post-meta-comments fa-lg"><i class="fa fa-comment"></i>1</span>
                </div>
            </div>
            <div class="col-md-9 column-15">
                <h6>Python基础</h6>
                <ul class="photos_list">
                    {% for level in all_level %}
                        <li {% if forloop.counter|divisibleby:3 %}class="last"{% endif %}>
                            <div class="column-inner_layout">
                                <div class="column-inner">
                                    <div class="team layout">
                                        <img class="img-responsive" src="{% static 'images/c5.jpg' %}" alt=""/>
                                        <div class="team-body-info">
                                            <div class="team-body">
                                                <div class="team-body-content">
                                                    <h6 class="team-name" style="font-size: 18px;">
                                                        第 {{ forloop.counter }} 关</h6>
                                                    <h6 class="team-name" style="font-size: 15px;">{{ level.name }}</h6>
                                                    <div class="team-job">时长：{{ level.learn_times }}</div>
                                                </div>
                                            </div>
                                            <div class="photos_social-icons">
                                                {% if level.open_level %}
                                                    <a href="{% url 'course:course_detail' courseid level.id %}">
                                                        开始闯关</a>
                                                {% else %}
                                                    <span><i class="fa fa-lock"></i> 开始闯关</span>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    {% endfor %}
                    <div class="clearfix"></div>
                </ul>
                {% if last_level.pass_level %}
                    <div class="alert alert-success" role="alert" style="margin-top: 50px;">恭喜！你已经闯关成功！</div>
                {% endif %}
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
{% endblock %}




